<template>
    <div>
        <el-form :model="selectFormData" ref="selectFormData" label-width="100px" class="selectForm">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="参赛者姓名" prop="conName">
                        <el-input v-model="selectFormData.conName" placeholder="参赛者姓名"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="参赛者身份证" prop="conId">
                        <el-input v-model="selectFormData.conId" placeholder="参赛者身份证"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="最低年龄" prop="conLowAge" @change="handleLowAgeChange">
                        <el-select v-model="selectFormData.conLowAge" placeholder="最低年龄">
                            <el-option v-for="item in allAges" :key='item' :label="item" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="4">
                    <el-form-item label="最高年龄" prop="conHighAge">
                        <el-select v-model="selectFormData.conHighAge" placeholder="最高年龄">
                            <el-option v-for="item in filteredMaxAges" :key='item' :label="item"
                                :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="参赛者性别" prop="conGender">
                        <el-select v-model="selectFormData.conGender" placeholder="请选择性别">
                            <el-option label="女" value="0"></el-option>
                            <el-option label="男" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="参赛者邮箱" prop="conEmail">
                        <el-input v-model="selectFormData.conEmail"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="参赛者电话" prop="conPhone">
                        <el-input v-model="selectFormData.conPhone"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="参赛者类别" prop="conClass">
                        <el-select v-model="selectFormData.conClass" placeholder="请选择类别">
                            <el-option v-for="cls in classes" :key="cls.classId" :label="cls.className"
                                :value="cls.classId"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" style="text-align: left;">参赛者表</el-col>
                <el-col :span="12" style="text-align: right;">
                    <el-button type="primary" @click="findByData" icon="el-icon-search">查询</el-button>
                    <el-button type="warning" @click="resetForm" icon="el-icon-refresh-right" plain>重置</el-button>
                </el-col>
            </el-row>
        </el-form>
        <!-- 表格 -->
        <el-table :data="tableData" :height="tableHeight" style="width: 100%" border>
            <el-table-column prop="conIndex" label="序号"></el-table-column>
            <el-table-column label="姓名" width="180">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>姓名: {{ scope.row.conName }}</p>
                        <p>邮箱: {{ scope.row.conEmail }}</p>
                        <p>密码: {{ scope.row.conPassword }}</p>
                        <p>电话: {{ scope.row.conPhone }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag>{{ scope.row.conName }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="conId" label="身份证"></el-table-column>
            <el-table-column prop="conAge" label="年龄"></el-table-column>
            
            <el-table-column prop="conClass" label="参赛者类别">
                <template slot-scope="scope" v-if="scope && classes[scope.row.conClass-1]">
                    {{ classes[scope.row.conClass-1].className }}
                </template>
            </el-table-column>
            <el-table-column prop="conBirth" label="参赛者生日"></el-table-column>
            <el-table-column prop="conCreatetime" label="创建时间" :formatter="formatterTime"></el-table-column>
            <el-table-column prop="conUpdatetime" label="更新时间" :formatter="formatterTime"></el-table-column>
            <!-- 其他列... -->
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="selectFormData.currentPage" :page-sizes="[10, 20, 30, 40]"
            :page-size="selectFormData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
        </el-pagination>
    </div>
</template>

<script>
    import moment from 'moment';
    export default {

        name: "professormanage",
        data() {
            
            return {
                
                dialogEditFormVisible: false,
                formLabelWidth: '120px',
                totalCount: 0, // 总记录数
                selectFormData: {
                    currentPage: 1, // 当前页码
                    pageSize: 10, // 每页显示数量
                    conId: '',
                    conName: '',
                    conLowAge: '',
                    conHighAge: '',
                    conGender: '',
                    conEmail: '',
                    conPhone: '',
                    conClass: ''

                },
                classes: [{
                    classId: '',
                    className: ''
                }
                ],
                

                allAges: [18,19,20,21,22,23,24,25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38,
                    39, 40, 41, 42, 43, 44, 45],
                filteredMaxAges: [],
                dialogAddFormVisible: false,
                tableData: [],
                tableHeight: window.innerHeight - 300,
            };
        },
        watch: {
            'selectFormData.conLowAge'(newVal) {
                this.filteredMaxAges = this.allAges.filter(age => age > newVal);
            }
        },
        methods: {
            formatterTime(row, column, cellValue, index) {
                return moment.utc(cellValue).local().format('YYYY-MM-DD HH:mm:ss');
            },
            getHeight() {
                console.log("tableHeight:" + this.tableHeight);
                this.tableHeight = window.innerHeight - 300;
            },
            Editcancel() {
                this.dialogEditFormVisible = false;
            },
            
            
            
            async fetchData() {
                console.log(this.selectFormData);
                this.$axios({
                    method: 'post',
                    url: 'http://localhost:8080/contestants',
                    data: this.selectFormData,
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(res => {
                    this.totalCount = res.data.data.total;
                    this.tableData = res.data.data.rows;
                    console.log(this.tableData);
                })
                this.$axios({
                    method: 'get',
                    url: 'http://localhost:8080/class',
                }).then(res => {
                    if (res.data.code == 1) {
                        this.classes = res.data.data;

                    }

                })

            },
            handleSizeChange(size) {
                this.selectFormData.pageSize = size;
                this.fetchData();
            },
            handleCurrentChange(page) {
                this.selectFormData.currentPage = page;
                this.fetchData();
            },
            handleLowAgeChange() {
                if (this.selectFormData.conLowAge !== '') {
                    this.filteredMaxAges = this.allAges.filter(age => age > this.selectFormData.conLowAge);
                } else {
                    this.filteredMaxAges = [...this.allAges]; // 当清除最小年龄时恢复所有最大年龄选项
                }
            },
            //查找
            findByData() {
                this.fetchData();
            },
            resetForm() {
                this.$refs.selectFormData.resetFields();
                this.fetchData();
            },
            getName(iden) {
                let val = iden.length;
                let sex = null;
                let myDate = new Date();
                let month = myDate.getMonth() + 1;
                let day = myDate.getDate();
                let age = 0;
                let birth = null;
                let password = null;
                if (val === 18) {
                    age = myDate.getFullYear() - iden.substring(6, 10) - 1;
                    sex = iden.substring(16, 17);
                    birth = iden.substring(6, 10) + "-" + iden.substring(10, 12) + "-" + iden.substring(12, 14);
                    if (iden.substring(10, 12) < month || iden.substring(10, 12) == month && iden.substring(12, 14) <= day) age++;
                    password = iden.substring(12, 18);
                }
                if (val === 15) {
                    age = myDate.getFullYear() - iden.substring(6, 8) - 1901;
                    sex = iden.substring(13, 14);
                    password = iden.substring(9, 15);
                    birth = "19" + iden.substring(6, 8) + "-" + iden.substring(8, 10) + "-" + iden.substring(10, 12);
                    if (iden.substring(8, 10) < month || iden.substring(8, 10) == month && iden.substring(10, 12) <= day) age++;
                }

                if (sex % 2 === 0)
                    sex = 0
                else
                    sex = 1
                this.addformData.conGender = sex;
                this.addformData.conAge = age;
                this.addformData.conBirth = birth;
                this.addformData.conPassword = password;

            },
        },
        created() {
            window.addEventListener('resize', this.getHeight)
        },
        mounted() {
            this.fetchData();
            window.addEventListener('resize', this.getHeight)
        },
    }
</script>

<style lang="less" scoped>
    .selectForm {
        .el-form-item__label {
            padding-right: 0px;
        }

        .el-form-item__content {
            margin-left: 0px;

            .el-input {
                width: 70%;
                margin-left: 0px;
            }
        }
    }

    
</style>